<template>
  <el-form ref="formRef" :model="formData" size="default" :rules="rules" label-width="">
    <label>未落实状态百分比值</label>
    <el-row style="margin-bottom: 30px" justify="start">
      <el-col :span="itemSpan">
        <el-form-item label="" prop="notImplementedValue">
          <el-input v-model="formData.notImplementedValue" type="number" placeholder="请输入未落实状态值">
            <template #append>%</template>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <label>半落实状态百分比值</label>
    <el-row style="margin-bottom: 30px" justify="start">
      <el-col :span="itemSpan">
        <el-form-item label="" prop="semiImplementationValue">
          <el-input v-model="formData.semiImplementationValue" type="number" placeholder="请输入半落实状态值">
            <template #append>%</template>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <label>已落实状态百分比值</label>
    <el-row style="margin-bottom: 30px" justify="start">
      <el-col :span="itemSpan">
        <el-form-item label="" prop="implementedValue">
          <el-input v-model="formData.implementedValue" type="number" placeholder="请输入已落实状态值">
            <template #append>%</template>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row justify="end" style="margin-top: 10px">
      <el-col :span="mobile === 'mobile' ? 24 : 12" style="display: flex; justify-content: end">
        <el-button type="primary" :loading="loading" @click="handleSubmit">提交</el-button>
      </el-col>
      <el-col :span="mobile === 'mobile' ? 24 : 12">
        <el-form-item></el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import { getCheckinWageSetting, setCheckinWageSetting } from "@/api/system/configuration/index";
import { CheckinWageStatusSettingEditForm } from "@/api/system/configuration/types";

import { useScreen } from "@/store/modules/screen";

const screenStore = useScreen();
const mobile = computed(() => screenStore.device);
const itemSpan = ref(6);

function initScreen() {
  if (mobile.value === "mobile") {
    itemSpan.value = 12;
  } else {
    itemSpan.value = 6;
  }
}

const formRef = ref();
const loading = ref(false);

const formData = reactive<CheckinWageStatusSettingEditForm>({});

const rules = reactive({
  notImplementedValue: [
    { required: true, message: "未落实状态值不能为空", trigger: "blur" },
    {
      trigger: "blur",
      validator: (rule: any, value: any, callback: any) => {
        if (value > 100 || value < 0) {
          callback(new Error("百分比必须在0-100之间"));
        } else {
          callback();
        }
      },
    },
  ],
  semiImplementationValue: [
    { required: true, message: "半落实状态值不能为空", trigger: "blur" },
    {
      trigger: "blur",
      validator: (rule: any, value: any, callback: any) => {
        if (value > 100 || value < 0) {
          callback(new Error("百分比必须在0-100之间"));
        } else {
          callback();
        }
      },
    },
  ],
  implementedValue: [
    { required: true, message: "已落实状态值不能为空", trigger: "blur" },
    {
      trigger: "blur",
      validator: (rule: any, value: any, callback: any) => {
        if (value > 100 || value < 0) {
          callback(new Error("百分比必须在0-100之间"));
        } else {
          callback();
        }
      },
    },
  ],
});

onMounted(() => {
  initScreen();

  handleQuery();
});

function handleQuery() {
  formRef.value.clearValidate();
  getCheckinWageSetting().then((res) => {
    if (res.success) {
      res.data.implementedValue = (res.data?.implementedValue ?? 0) * 100;
      res.data.notImplementedValue = (res.data?.notImplementedValue ?? 0) * 100;
      res.data.semiImplementationValue = (res.data?.semiImplementationValue ?? 0) * 100;
      Object.assign(formData, res.data);
    }
  });
}

/**
 * 重置表单
 */
function resetForm() {
  formRef.value.resetFields();
  formRef.value.clearValidate();
}

function handleSubmit() {
  formRef.value.validate((valid: any) => {
    if (valid) {
      loading.value = true;
      let temp = Object.assign({}, formData);
      temp.implementedValue = (formData?.implementedValue ?? 0) / 100;
      temp.notImplementedValue = (formData?.notImplementedValue ?? 0) / 100;
      temp.semiImplementationValue = (formData?.semiImplementationValue ?? 0) / 100;
      setCheckinWageSetting(temp)
        .then((data) => {
          if (data.success) {
            ElMessage({
              type: "success",
              message: data.msg,
            });
          } else {
            ElMessage({
              type: "error",
              message: data.msg,
            });
          }
          loading.value = false;
        })
        .catch((e) => {
          ElMessage({
            type: "error",
            message: "修改失败！",
          });
          loading.value = false;
        })
        .finally(() => {
          loading.value = false;
          handleQuery();
        });
    }
  });
}
</script>

<style lang="less" scoped></style>
